<template>
  <div ref="wrapper">
    <div>
      <div v-show="showAbs">
        <div class="banner-text" @click="jumpRoute">
          <div>
            <div class="lifyBg"></div>
            <img class="arrow-lift" src="@/assets/img/arrow-lift.png" alt="图片" />
          </div>
        </div>
      </div>
      <!-- 引入动画组件 -->
      <fade>
        <div class="header-fixed" v-show="!showAbs">
          <div class="header" @click="jumpRoute">
            <p>城市</p>
            <img class="header-icon" src="@/assets/img/arrow-lift.png" />
          </div>
        </div>
      </fade>
      
    </div>
  </div>
</template>
<script>
import BScroll from "better-scroll";
import fade from "@/components/fade/fade";
export default {
  name: "detailheader",
  components: {
    fade
  },
  props: {
    gallaryImgs: Array
  },
  data() {
    return {
      showAbs: true,
      opacityStyle: {
        opacity: 0
      }
    };
  },
  methods: {
    jumpRoute() {
      // this.$router.push({
      //   path: "/"
      // });
      this.$router.go(-1);
    },
    //事件挂载
    showIcon() {
      // console.log("scroll")
      const top = document.documentElement.scrollTop;
      if (top > 40 && !!top) {
        // 页面高度大于200执行操作
        // let opacity = top / 140;
        // opacity = opacity > 1 ? 1: opacity  //opacity <=1
        // this.opaticyStyle = {
        //   opacity:opacity
        // };
        this.showAbs = false;
      } else {
        //  页面高度小于40执行操作
        this.showAbs = true;
      }
    }
  },
  mounted() {
    this.scroll = new BScroll(this.$refs.wrapper, {
      scrollY: true,
      click: true
    });
  },
  activated() {
    // 页面展示
    window.addEventListener("scroll", this.showIcon);
  },
  // keepAlive 出现之后 的 生命周期函数，在 页面转换的时候 会出现
  deactivated() {
    // 页面隐藏 解绑全局事件 不会对其他页面产生影响
    window.removeEventListener("scroll", this.showIcon);
  }
  // watch:{

  // }
};
</script>
<style scoped>
.banner-text {
  z-index: 1;
  position: absolute;
  top: 0px;
  left: 2px;
  font-size: 18px;
  color: #ffffff;
  text-indent: 10px;
}
.banner-text .lifyBg {
  position: relative;
  width: 40px;
  height: 40px;
  background: #000;
  opacity: 0.35;
  border-radius: 50%;
}
.banner-text .arrow-lift {
  position: absolute;
  width: 30px;
  height: 30px;
  top: 5px;
  left: 4px;
}
.banner-text .bannerTxt {
  position: relative;
  top: 135px;
  left: 0px;
}
.banner-text .photoBg {
  width: 70px;
  position: relative;
  height: 25px;
  border-radius: 5px;
  background: #000;
  opacity: 0.5;
  top: 85px;
  left: 10px;
}
.banner-text .photo {
  width: 20px;
  height: 16px;
  position: relative;
  top: 62px;
  left: 10px;
}
.banner-text .photo-cont-num {
  font-size: 12px;
  position: relative;
  top: 42px;
  left: 35px;
}
.header,
.header {
  z-index: 1;
  position: fixed;
  height: 45px;
  line-height: 45px;
  width: 100%;
  background: #00bcd4;
  /* border-bottom: 1px solid #eeeeee; */
  font-size: 15px;
  text-align: center;
  color: #ffffff;
  overflow: hidden;
  top: 0px;
}
.header .header-icon {
  overflow: hidden;
  position: relative;
  width: 27px;
  padding-bottom: 27px;
  left: -170px;
  top: -35px;
  /* top: 0px; */
  /* left: 10px; */
}
</style>